<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<h1>父组件接收到子组件中的数据 {{childData}}</h1>
		<HelloWorld msg="直接带入值" :count="parentCount" @child-count-change="handler"> 这是默认内容1
		<!-- v-slot:footer #footer-->
			<template #footer="dataObj">第一个footer {{dataObj.childCount}}</template>
		</HelloWorld>
		<HelloWorld>这是默认内容2</HelloWorld>
		<HelloWorld>这是默认内容3</HelloWorld>
		<HelloWorld></HelloWorld>
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'

	export default {
		name: 'App',
		components: {
			HelloWorld
		},
		data() {
			return {
				parentCount: '10001(响应式)',
				childData: 0
			}
		},
		methods: {
			handler(childCount) {
				this.childData = childCount;
			}
		}

	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
